<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #result{
      width: 200px;
      height: 100px;
      border: 1px solid
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div id="result"></div>
</body>
<script>
  const  result = document.getElementById('result')
  //绑定键盘按下事件
  window.onkeydown = function() {
    console.log(111);
    //发送请求
    const xhr = new XMLHttpRequest();
    //设置响应体数据的类型(和下面的自动转换可以一块使用)
    xhr.responseType = 'json'
    //初始化
    xhr.open('GET','http://127.0.0.1:8000/json-server');
    //发送
    xhr.send();
    //事件绑定
    xhr.onreadystatechange = function(){
      if(xhr.readyState===4){
        if(xhr.status>=200 && xhr.status<300){
          //手动对数据转化
          // console.log('从服务器中得到的数据的样子',xhr.response);
          // let data = JSON.parse(xhr.response);
          // console.log('使用JSON转化之后的data',data);
          // result.innerHTML =data.name

          //自动转换
          console.log('自动转换从服务器得到的数据',xhr.response);
          result.innerHTML = xhr.response.name


        }
      }
    }


  }



</script>

</html>